<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加项目</title>
    <link  href="../../hos_manage/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="../css/messages_doctor_mes.css">
    <link rel="stylesheet" href="../css/sweetalert.css" >
    <link rel="stylesheet" href="../css/pageCode.css" />
    <link rel="stylesheet" href="/css/project/add.css">
    <link href="http://cdn.bootcss.com/animate.css/2.1.1/animate.min.css" rel="stylesheet">
	<link href="http://cdn.gbtags.com/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
	<link href="http://cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="http://cdn.bootcss.com/summernote/0.8.2/summernote.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/project/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/project/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/project/main.css"/>
    <link rel="stylesheet" type="text/css" href="/css/project/plugin/plugin.css"/>
    <link rel="stylesheet" href="/css/basic/basic.css">
    <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/basic/ie_basic.css">
    <![endif]-->
    <link rel="stylesheet" href="/css/project/user.css">
    <link rel="stylesheet" href="../css/public.css">
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="/css/project/plugin/plugin.js" charset="utf-8"></script>
    <script src="/js/bootstrap.min.js"></script>
	<script src="/js/bootstrap-datetimepicker.min.js"></script>
	<script src="/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="http://cdn.bootcss.com/summernote/0.8.2/summernote.min.js"></script>
	<script src="http://cdn.bootcss.com/summernote/0.7.1/lang/summernote-zh-CN.min.js"></script>
</head>
<body>
    <%@ include file="../header.jsp"%>
    <!--内容-->
    <div class="containerone">
    <%@ include file="../left_menu.jsp"%>
        <!--右边内容-->
        <div class="right_cont">
        <!--右边导航下面内容-->
            <div class="message_hos_news_container" id="add_project">
                <div class="content">
                    <div class="add-project-head strong">
                        添加项目<addsvg></addsvg>
                        <div class="tag">
                            <tag></tag>
                        </div>
                    </div>
                    <div class="add-project-body">
                        <div class="add-project-row">
                            <hospital></hospital>
                            <span class='strong name'>所属医院</span>
                            <div style="display:inline-block; width: 334px">
                                <singleselect :list="hospitalList" :choosed="hospital" value="hospital" key="name" editable="false"></singleselect>
                            </div>
                        </div>
                        <div class="add-project-row">
                            <project></project>
                            <span class='strong name'>项目名称</span>
                            <input class="add-project-input" v-model="name">
                            <necessary></necessary>
                        </div>
                        <div class="add-project-row">
                            <principal></principal>
                            <span class='strong name'>主要负责人</span>
                            <div style="display:inline-block; width: 334px">
                                <singleselect :list="developerList" :choosed="principal" value="principal" editable="true"></singleselect>
                            </div>
                            <necessary></necessary>
                        </div>
                        <div class="add-project-row">
                            <type></type>
                            <span class='strong name'>版本类型</span>
                            <div class="" style="display:inline-block; width: 334px">
                                <multiselect :datas="datas" :selected="selected" type="selected"></multiselect>
                            </div>
                        </div>
                        <div class="add-project-row">
                            <type></type>
                            <span class='strong name'>项目类型</span>
							<div style="display:inline-block; width: 334px">
                                <singleselect :list="datas2" :choosed="selected2" value="selected2"></singleselect>
                            </div>
                            <necessary></necessary>
                        </div>
                        <div class="add-project-row">
                            <saler></saler>
                            <span class='strong name'>销售负责人</span>
                            <div style="display:inline-block; width: 334px">
                                <singleselect :list="salerList" :choosed="saler" value="saler" editable="true"></singleselect>
                            </div>
                            <necessary></necessary>
                        </div>
                        <div class="add-project-row">
                            <custom></custom>
                            <span class='strong name'>备注</span>
                            <input class="add-project-input" v-model="customer">
                        </div>
                        <div class="add-project-row">
                            <state></state>
                            <span class='strong name'>状态</span>
                            <div style="display:inline-block; width: 334px">
                                <singleselect :list="stateList" :choosed="state" value="state" editable="false"></singleselect>
                            </div>
                            <necessary></necessary>
                        </div>
                        <div class="add-project-row">
                            <time></time>
                            <span class='strong name'>项目时间</span>
                            <div class="timepicker-container">
                                <div class="input-group date form_datetime" :data-date="startTime" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1">
                                    <input class="form-control" size="16" type="text" v-model="startTime" readonly>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </span>
                                    <span class="input-group-addon" style="border-radius:0">
                                        <span class="glyphicon glyphicon-th"></span>
                                    </span>
                                </div>
                                <div class="start-to-end">至</div>
                                <div class="input-group date form_datetime" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1">
                                    <input class="form-control" style="border-radius:0" size="16" type="text" v-model="endTime" readonly>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </span>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-th"></span>
                                    </span>
                                </div>
                            </div>
                            <necessary></necessary>
                        </div>
                        <div class="add-project-row textarea-name">
                            <descript></descript>
                            <span class='strong name'>项目描述</span>
                            <div id="editor"></div>
                        </div>
                        <div class="submit" @click="submit()">
                            保存
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/sweetalert-dev.js"></script>
    <%@ include file="/svg/add.jsp"%>
	<%@ include file="/svg/necessary.jsp"%>
    <%@ include file="/svg/state.jsp"%>
	<%@ include file="/svg/name.jsp"%>
	<%@ include file="/svg/time.jsp"%>
    <%@ include file="/svg/tag_svg.jsp"%>
	<%@ include file="/svg/hospital.jsp"%>
	<%@ include file="/svg/project.jsp"%>
	<%@ include file="/svg/principal.jsp"%>
	<%@ include file="/svg/type.jsp"%>
	<%@ include file="/svg/data.jsp"%>]
	<%@ include file="/svg/app.jsp"%>
	<%@ include file="/svg/saler.jsp"%>
	<%@ include file="/svg/sale_leader.jsp"%>
	<%@ include file="/svg/custom.jsp"%>
	<%@ include file="/svg/descript.jsp"%>
	<%@ include file="/svg/number.jsp"%>
    <%@ include file="/components/multi_select.jsp"%>
    <%@ include file="/components/single_select.jsp"%>
    <script type="text/javascript">
        new Vue({
            el: "#add_project",
            data: function() {
                return {
                    name: "",
                    customer: "", // 这个页面上这个字段就是备注
                    startTime: "",
                    endTime: "",
                    hospitalList: [],
                    developerList: [],
                    salerList: [],
                    hospital: "",
                    principal: "",
                    saler: "",
                    stateList: ["已立项", "已结项", "延期"],
                    state: "已立项",
                    selected: ["安卓"],
                    datas: [
                        "安卓", "苹果", "微信端", "其他"
                    ],
                    selected2: "新建项目",
                    datas2: [
                        "新建项目", "增补项目", "增补版本"
                    ],
                }
            },
            events: {
                selectedChange: function(data) {
                    this[data.type] = data.selected;
                }
            },
            methods: {
                submit: function() {
                    var self = this;
                    var sHTML = $('.note-editable').html();
                    if (self.name.length == 0) {
                        swal({
                            "title": "项目名称尚未填写",
                        });
                        return;
                    }
                    if (/\s/.test(this.name)) {
                        swal("项目名称不能包含空格");
                        return;
                    }
                    if (!compareTime(self.startTime, self.endTime)) {
                        swal({
                            "title": "结束时间需要晚于开始时间",
                        });
                        return;
                    }
                    if (self.principal == "") {
                        swal({
                            "title": "请填写主要负责人",
                        });
                        return;
                    }
                    if (/\s/.test(this.principal)) {
                        swal("主要负责人不能包含空格");
                        return;
                    }
                    if (self.saler == "") {
                        swal({
                            "title": "请填写销售负责人",
                        });
                        return;
                    }
                    if (/\s/.test(this.principal)) {
                        swal("销售负责人不能包含空格");
                        return;
                    }
                    $.ajax({
                        data: {
                            hospital_id: self.hospital.hospital_id + "",
                            name: self.name,
                            principal: self.principal,
                            version_type: self.selected.join(","),
                            item_type: self.selected2,
                            state: self.state,
                            sale_leader: self.saler,
                            remark: self.customer,
                            start_time: self.startTime,
                            end_time: self.endTime,
                            description: encodeURI(sHTML.replace(/"/g, "'")),
                            act: "create_project",
                        },
                        url: "add.jsp",
                        success: function(res) {
                            res = JSON.parse(res);
                            if (res.errcode == 0) {
                                locationHerf("projects");
                            } else {
                                swal({
                                    title: res.errmsg,
                                });
                            }
                        }
                    });
                }
            },
            ready: function() {
                var self = this;
                // 时间选择器组件
                $('.form_datetime').datetimepicker({
                    language:  'zh-CN',
                    weekStart: 1,
                    todayBtn:  1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    forceParse: 0,
                    todayHighlight: true,
                    minView: "month",
                    format: "yyyy-mm-dd",
                });
                // 富文本框组件
                $('#editor').summernote({
                    lang: 'zh-CN',
                    callbacks: {
                        onImageUpload: function(files) {
                            for (var i = 0; i < files.length; i++) {
                                eeesysLoading();
                                localImg(files[i]);
                            }
                            // upload image to server and create imgNode...
                        }
                    }
                });
                // 获得今天时间
                var date = new Date();
                var month = date.getMonth() + 1;
                month = month < 10 ? "0" + month : month;
                self.startTime = date.getFullYear() + "-" + month + "-" + date.getDate();
                // 获取医院列表、
                $.ajax({
                    data: {
                        act: "hospitals",
                    },
                    url: "add.jsp",
                    success: function(res) {
                        res = JSON.parse(res);
                        if (res.errcode == 0) {
                            self.hospitalList = res.data;
                            self.hospital = res.data[0];
                        }
                    }
                });
                $.ajax({
                    data: {
                        act: "principals",
                    },
                    url: "add.jsp",
                    success: function(res) {
                        res = JSON.parse(res);
                        if (res.errcode == 0) {
                            self.developerList = res.principals;
                            self.salerList = res.sale_leaders;
                        }
                    }
                });
            },
            components: {
                addsvg: {template: "#add"},
                necessary: {template: "#necessary"},
            	name: {template: "#name"},
            	tag: {template: "#tag"},
            	time: {template: "#time"},
            	hospital: {template: "#hospital"},
            	project: {template: "#project"},
            	principal: {template: "#principal"},
            	type: {template: "#type"},
                state: {template: "#state"},
            	data: {template: "#data"},
            	app: {template: "#app"},
            	saler: {template: "#saler"},
            	saleleader: {template: "#sale_leader"},
            	custom: {template: "#custom"},
            	descript: {template: "#descript"},
            	number: {template: "#number"},
                multiselect: multiselect,
                singleselect: singleselect,
            }
        });
        function compareTime(start, end) {
            var startDate = new Date(start);
            var startTime = startDate.getTime();
            var endDate = new Date(end);
            var endTime = endDate.getTime();
            if (startTime < endTime) {
                return true;
            }
            return false;
        }
        function localImg(file) {
            var xmlhttprequest;
            var form = new FormData();
            form.append("file", file);
            if (window.XMLHttpRequest) {
               xmlhttprequest = new XMLHttpRequest();
               if (xmlhttprequest.overrideMimeType) {
                    xmlhttprequest.overrideMimeType("text/xml");
               }
            }
            xmlhttprequest.open("POST", "http://cloud.eeesys.com/pu/upload.php", true);
            xmlhttprequest.onreadystatechange = callback.bind(this);
            xmlhttprequest.send(form);
            function callback() {
                if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                    eeesysLoadingCancel();
                    var res = JSON.parse(xmlhttprequest.responseText);
                    if (res.errcode == 0) {
                        $('#editor').summernote('insertImage', res.img.replace("small", "big"));
                    } else {
                        swal({
                            txt: decodeURI(res.errmsg),
                            title: "",
                        });
                    }
                }
            }
        }
        function hasClass(obj, cls) {
            return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
        }
        function addClass(obj, cls) {
            if (!this.hasClass(obj, cls)) obj.className += " " + cls;
        }
        function removeClass(obj, cls) {
            if (hasClass(obj, cls)) {
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                obj.className = obj.className.replace(reg, ' ');
            }
        }
    </script>
</body>
</html>
